import { Select } from 'antd'
import React, { useEffect, useRef, useState } from 'react'
import * as echarts from 'echarts'

import { getAdminRequest, getAllParkingTypeRequest } from '@/apis/admin'
import { OptionType } from '@/store/parking'

const lineStyle = {
	width: 1,
	opacity: 0.5
};
const option: any =
{
	backgroundColor: '#161627',
	title: {
		text: '车位占比统计',
		left: 'left',
		textStyle: {
			color: '#eee'
		}
	},
	tooltip: {
		trigger: 'item',
	},
	radar: {
		indicator: [],
		shape: 'circle',
		splitNumber: 5,
		axisName: {
			formatter: function (value: any, indicator: any) {
				return `【${value}(${indicator.max})】`
			},
			color: 'rgb(238, 197, 102)'
		},
		splitLine: {
			lineStyle: {
				color: [
					'rgba(238, 197, 102, 0.1)',
					'rgba(238, 197, 102, 0.2)',
					'rgba(238, 197, 102, 0.4)',
					'rgba(238, 197, 102, 0.6)',
					'rgba(238, 197, 102, 0.8)',
					'rgba(238, 197, 102, 1)'
				].reverse()
			}
		},
		splitArea: {
			show: false
		},
		axisLine: {
			lineStyle: {
				color: 'rgba(238, 197, 102, 0.5)'
			}
		}
	},
	series: [
		{
			type: 'radar',
			lineStyle: lineStyle,
			data: [
				{
					value: [],
					tooltip: {
						formatter: function (params: any) {
							return '车辆占比类型';
						}
					},
					symbol: 'pin',
					symbolSize: 12,
					lineStyle: {
						type: 'dashed'
					},
					label: {
						show: true,
						formatter(params: any) {
							return params.value
						}
					}
				},
			],
			symbol: 'none',
			itemStyle: {
				color: '#F9713C'
			},
			areaStyle: {
				opacity: 0.1
			}
		}
	]
};
const ParkingType: React.FC = () => {
	const chartRef = useRef<HTMLDivElement>(null)
	const myecharts = useRef<echarts.ECharts>();
	const [options, setOptions] = useState<OptionType[]>()
	const [selected, setSelected] = useState<string>('all')

	useEffect(() => {
		getAdminRequest().then((res: any) => {
			const options = res.result.map((item: any) => ({
				label: item.building,
				value: item.building
			}))
			options?.push({
				label: '所有楼栋',
				value: 'all'
			})
			setOptions(options)
		})
		myecharts.current = echarts.init(chartRef.current as HTMLDivElement)
		getAllParkingType('all', '所有楼')
		return () => {
			myecharts.current?.dispose()
		}
	}, [])

	const onSelect = (value: string, option: OptionType) => {
		setSelected(value)
		getAllParkingType(value, option.label as string)
	}

	const getAllParkingType = (building: string, text: string) => {
		getAllParkingTypeRequest({ building }).then((res: any) => {
			const result = res.result
			option.title.text = `${text}栋车位类型使用统计`
			option.radar.indicator = result.indicator
			option.series[0].data[0].value = result.value
			myecharts.current?.setOption(option)
		})
	}

	return <div>
		<Select options={options} value={selected} onSelect={onSelect}></Select>
		<div ref={chartRef} style={{ width: "620px", height: "400px" }}></div>
	</div>
}

export default ParkingType